<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<script type="text/javascript">
    function page(n, s) {
        $("#pageNo").val(n);
        $("#pageSize").val(s);
        $("#searchForm").submit();
        return false;
    }
</script>
<div class="app">
    <section class="layout">
        <section class="main-content col-lg-12" id="bloodOutpDetailDiv">
            <div class="content-wrap">
                <div class="wrapper" style="bottom: 50px;">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#" onclick="loadDiv('mainCenterDiv','${ctx}/blood/bloodExport/index')">出库处理</a>
                        </li>
                    </ul>
                    <section class="panel panel-default">
                        <div class="panel-body">
                            <div class="table-responsive no-border">
                                <div class="datatable-top">
                                    <div class="pull-left">
                                        <form:form id="searchForm" modelAttribute="bloodOutpDetail"
                                                   onsubmit="return loadDivForm('mainCenterDiv','searchForm','${ctx}/blood/bloodExport/index');"
                                                   method="post" class="form-inline">
                                            <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
                                            <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}" />
                                            <div class="form-group">
                                                <label class=" control-label">出库方式：</label>
                                                <form:select path="bloodOutpMaster.outpType" id="outpType" htmlEscape="false" class="form-control" maxlength="2" data-parsley-required="true">
                                                    <form:options items="${fns:getDictList('BLOOD_EXPORT_CLASS')}" itemLabel="label" itemValue="value" htmlEscape="false" />
                                                </form:select>
                                            </div>
                                            <div class="form-group">
                                                <label class=" control-label">接收单位：</label>
                                                <form:select path="bloodOutpMaster.sentDept" id="sentDept" htmlEscape="false" class="form-control" maxlength="64" data-parsley-required="true">
                                                    <form:options items="${fns:getLowLevelDeptList()}" itemLabel="deptName" itemValue="id" htmlEscape="false" />
                                                </form:select>
                                            </div>
                                            <div class="form-group">
                                                <label class=" control-label">出库单号：</label>
                                                <input class="form-control" name="outpNo" id="outpNo" htmlEscape="false" type="text" readonly/>
                                            </div>
                                            <div class="form-group">
                                                <label class=" control-label">出库时间：</label>
                                                <input name="outpDate" id="outpDate" htmlEscape="false" class="form-control Wdate" data-parsley-required="true" readonly />
                                            </div>

                                            <div class="form-group">
                                                <input id="btnSubmit" class="btn btn-primary" type="button" onclick="saveListForm()" value="保存" />
                                                <input id="addBlood" class="btn btn-primary" type="button" value="添加" onclick="addOutpItem()" />
                                            </div>
                                        </form:form>
                                    </div>
                                </div>
                                <form id="saveListForm" action="${ctx}/blood/bloodExport/save" method="post" class="form-inline">
                                <table id="contentTable" class="table table-bordered table-striped mg-t datatable">
                                    <thead>
                                    <tr>
                                        <th hidden>jsonText</th>
                                        <th hidden>ID</th>
                                        <th hidden>出库方式</th>
                                        <th hidden>接收单位</th>
                                        <th hidden>出库单号</th>
                                        <th>入库单号</th>
                                        <th>血袋号</th>
                                        <th hidden>血型代码</th>
                                        <th>血型</th>
                                        <th hidden>RH代码</th>
                                        <th>RH</th>
                                        <th hidden>血液成分ID</th>
                                        <th>血液成分</th>
                                        <th>储血量</th>
                                        <th hidden>单位</th>
                                        <th>单位</th>
                                        <th>采血日期</th>
                                        <th>有效期</th>
                                        <th>献血者</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${page.list}" var="bloodOutpDetail" varStatus="idx">
                                    <tr xia="${idx.index}">
                                        <td hidden>${bloodOutpDetail.id}<input type="hidden" id="id${idx.index}" name="bloodExportDetailList[${idx.index}].id" value="${bloodOutpDetail.id}" /></td>
                                        <td hidden>${bloodOutpDetail.bloodOutpMaster.outpType}<input type="hidden" id="outpType${idx.index}" name="bloodExportDetailList[${idx.index}].bloodOutpMaster.outpType" value="${bloodOutpDetail.bloodOutpMaster.outpType}" /></td>
                                        <td hidden>${bloodOutpDetail.bloodOutpMaster.sentDept}<input type="hidden" id="sentDept${idx.index}" name="bloodExportDetailList[${idx.index}].bloodOutpMaster.sentDept" value="${bloodOutpDetail.bloodOutpMaster.sentDept}"
                                                /></td>
                                        <td hidden>${bloodOutpDetail.bloodOutpMaster.outpNo}<input type="hidden" id="outpNo${idx.index}" name="bloodExportDetailList[${idx.index}].bloodOutpMaster.outpNo"
                                                                                                       value="${bloodOutpDetail.bloodOutpMaster.outpNo}" /></td>
                                        <td hidden> ${bloodOutpDetail.bloodInpMaster.inpNo}<input type="hidden" id="bloodExportDetailList.bloodInpMaster.inpNo${idx.index}"
                                                                                                  name="bloodExportDetailList[${idx.index}].bloodInpMaster.inpNo"
                                                                                                 value="${bloodOutpDetail.bloodInpMaster.inpNo}" /></td>
                                        <td> ${bloodOutpDetail.bloodId}<input type="hidden" name="bloodExportDetailList[${idx.index}].bloodId" value="${bloodOutpDetail.bloodId}" /></td>
                                        <td hidden> ${bloodOutpDetail.patBloodGroupCode}<input type="hidden" name="bloodExportDetailList[${idx.index}].patBloodGroupCode" value="${bloodOutpDetail.patBloodGroupCode}" /></td>
                                        <td> ${bloodOutpDetail.patBloodGroup}<input type="hidden" name="bloodExportDetailList[${idx.index}].patBloodGroup" value="${bloodOutpDetail.patBloodGroup}" /></td>
                                        <td hidden> ${bloodOutpDetail.rhCode}<input type="hidden" name="bloodExportDetailList[${idx.index}].rhCode" value="${bloodOutpDetail.rhCode}" /></td>
                                        <td> ${bloodOutpDetail.rh}<input type="hidden" name="bloodExportDetailList[${idx.index}].rh" value="${bloodOutpDetail.rh}" /></td>
                                        <td hidden> ${bloodOutpDetail.componentId}<input type="hidden" name="bloodExportDetailList[${idx.index}].componentId" value="${bloodOutpDetail.componentId}" /></td>
                                        <td> ${bloodOutpDetail.bloodComponentName}<input type="hidden" name="bloodExportDetailList[${idx.index}].bloodComponentName" value="${bloodOutpDetail.bloodComponentName}" /></td>
                                        <td> ${bloodOutpDetail.bloodCapacity}<input type="hidden" name="bloodExportDetailList[${idx.index}].bloodCapacity" value="${bloodOutpDetail.bloodCapacity}" /></td>
                                        <td hidden> ${bloodOutpDetail.units}<input type="hidden" name="bloodExportDetailList[${idx.index}].units" value="${bloodOutpDetail.units}" /></td>
                                        <td> ${bloodOutpDetail.unitsName}<input type="hidden" name="bloodExportDetailList[${idx.index}].unitsName" value="${bloodOutpDetail.unitsName}" /></td>
                                        <td> ${bloodOutpDetail.bloodGatherDate}<input type="hidden" name="bloodExportDetailList[${idx.index}].bloodGatherDate" value="${bloodOutpDetail.bloodGatherDate}" /></td>
                                        <td> ${bloodOutpDetail.invalDate}<input type="hidden" name="bloodExportDetailList[${idx.index}].invalDate" value="${bloodOutpDetail.invalDate}" /></td>
                                        <td> ${bloodOutpDetail.bloodDonorName}<input type="hidden" name="bloodExportDetailList[${idx.index}].bloodDonorName" value="${bloodOutpDetail.bloodDonorName}" /></td>
                                        <td> ${bloodOutpDetail.remarks}<input type="hidden" name="bloodExportDetailList[${idx.index}].remarks" value="${bloodOutpDetail.remarks}" /></td>
                                        <td>
                                            <%--<a href="#" onclick="loadDiv('mainCenterDiv','${ctx}/blood/bloodExport/form?id=${bloodOutpDetail.bloodOutpMaster.outpNo}')" class="btn btn-success btn-xs">修改</a>--%>
                                            <a href="#" class="applyBt btn btn-danger btn-xs"
                                               onclick="confirmExtend('确认要删除该数据吗？',function(){delLoad('mainCenterDiv','${ctx}/blood/bloodExport/delete?id=${bloodOutpDetail.id}','${ctx}/sys/dict/index')})">删除</a>
                                        </td>
                                    </tr>
                                    </c:forEach>
                                </table>
                                </form>
                                <div class="pagination">${page}</div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
        <%--右侧药品出库明细列表--%>
        <section class="main-content col-lg-4" style="display: none" id="bloodExportRightDiv">
            <div class="content-wrap" id="rigthCenterDiv">
            </div>
        </section>
    </section>
</div>
<script type="text/javascript">
    //设置入库日期为当前时间,不能编辑
    var date = new Date();
    var nowMonth = "";
    if (date.getMonth() + 1 <= 9) {
        nowMonth = "0" + (date.getMonth() + 1) + "";
    } else {
        nowMonth = (date.getMonth() + 1) + "";
    }
    var hours = "";
    if (date.getHours() < 10) {
        hours = "0" + date.getHours();
    } else {
        hours = date.getHours();
    }
    var minutes = "";
    if (date.getMinutes() < 10) {
        minutes = "0" + date.getMinutes();
    } else {
        minutes = date.getMinutes();
    }
    var seconds = "";
    if (date.getSeconds() < 10) {
        seconds = "0" + date.getSeconds();
    } else {
        seconds = date.getSeconds();
    }
    var now = date.getFullYear() + "-" + nowMonth + "-" + date.getDate() + " " + hours + ":" + minutes + ":" + seconds;
    $('#outpDate').val(now);

    load();
    function load() {
        //出库单号赋值
        $.ajax({
            url: '${ctx}/blood/bloodExport/getMaxOutpNo',
            type: 'get',
            contentType: 'application/json',
            async: true,
            success: function (data, textStatus, jqXHR) {
                var inpNo = '';
                if (null != data.data && data.data != '' && typeof(data.data) != 'undefined') {
                    inpNo = Number(data.data) + 1
                } else {
                    inpNo = 1
                }
                $('#outpNo').val(('000000' + inpNo).substr(-6));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            }
        });

    }

    //保存
    function saveListForm() {
        $("#saveListForm").ajaxSubmit({
            success: function (data) {
                if (data.code == 'success') {
                    toastr.success(data.data);
                    loadDivForm('mainCenterDiv', 'searchForm', '${ctx}/blood/bloodExport/index');
                } else {
                    toastr.error(data.data);
                }
            },
            error: function (data) {
                toastr.error(data.data);
            }
        });
    }

    //弹出右边增加血液出库明细
    function addOutpItem() {
        $("#bloodOutpDetailDiv").attr("class", "main-content col-lg-8");
        $("#bloodExportRightDiv").show('normal');
        return loadDiv('rigthCenterDiv', '${ctx}/blood/bloodExport/form');
    }

    var inpNoList = [];  //入库单号
    var bloodItemList = [];  //血袋号
    //添加
    function addOutpItem(){
        //加载可以出库的血液入库单号及血袋信息
        $.ajax({
            url: '${ctx}/blood/bloodExport/autoCompleteInpNo',
            type: 'get',
            contentType: 'application/json',
            async: true,
            success: function (data, textStatus, jqXHR) {
                for (var i = 0; i < data.length; i++) {
                    if (inpNoList.indexOf(data[i].bloodInpMaster.inpNo) == -1){
                        inpNoList.push(data[i].bloodInpMaster.inpNo);
                    }
                }
                bloodItemList = data;
                var dragHtml = '<div id="labDivId" class="drag-main">';
                dragHtml += '<dl id="bloodIdSelected" class="drag-selected"><dt>已选血袋:</dt><dd class="drag-main-div"></dd></dl>';
                dragHtml += '</div>';
                $('#drag_h').html('<b>请选择入库血袋号</b><span onclick="bloodExport.confirm()">确定</span>');
                $('#drag_con').html(dragHtml);
                bloodExport.Show(inpNoList,bloodItemList);
                boxAlpha();
                draglayer();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }

    var bloodExport = {
        init: function (bloodItemIds) {
            if (bloodItemIds == '' || bloodItemIds == null) {
                return false;
            }
            var strs = new Array(); //定义一数组
            strs = bloodItemIds.split(","); //字符分割
            for (var i = 0; i < strs.length; i++) {
                bloodExport.Chk('' + strs[i] + '');
            }
        },
        Show: function (inpNos, bloodItems) {
            for (var i = 0; i < inpNos.length; i++) {
                var bloodHtml = "";
                bloodHtml += '<div id="inpNoId' + i + '">';
                bloodHtml+='<h4>'+ inpNos[i]+':</h4>';
                bloodHtml += '<dl><dt>&nbsp;</dt><dd class="drag-main-div">';
                for (var j = 0; j < bloodItems.length; j++) {
                    if(bloodItems[j].bloodInpMaster.inpNo == inpNos[i]){
                        bloodHtml += '<li class="selected" id="' + bloodItems[j].id + '" onclick="bloodExport.Chk(\'' + bloodItems[j].id + '\')">' + bloodItems[j].bloodId+"||"+
                        bloodItems[j].bloodComponentName+"||"+ bloodItems[j].bloodCapacity+ bloodItems[j].unitsName + '</li>';
                    }
                }
                bloodHtml += '</dd></dl>';
                bloodHtml += '</div>';
                $("#bloodIdSelected").after(bloodHtml);
//                if (bloodItemIds != "" && bloodItemIds != null) {
//                    exam.init(bloodItemIds, 'inpNoId' + i + '');
//                }
            }
        },
        Chk: function (id) {
            var isChk = $("#" + id).attr("class");
            if (isChk.indexOf("chkON") != -1) {
                $("#chk" + id).remove();
                $("#" + id).attr("class", "selected");
                return false;
            }
            $("#" + id).addClass("chkON");
            var chkHtml = $("#" + id).clone(true);
            var liXm = $(chkHtml).attr("id", "chk" + id);
            $("#bloodIdSelected dd").append(liXm);
            $("#chk" + id).attr("onclick", "bloodExport.del('chk" + id + "')");
            $("#chk" + id).attr("chkId", id);

        },
        del: function (id) {
            var chkId = $("#" + id).attr("chkId");
            $("#" + id).remove();
            $("#" + chkId).attr("class", "selected");
        },
        confirm: function () {
            $("#bloodIdSelected dd li").each(function(index,item){
                var bloodItemId = '';
                var chkId = $(this).attr('id');
                var aa = chkId.indexOf('chk');
                if(aa != -1){
                    bloodItemId = chkId.substring(aa + 3);
                }
                if($.trim(bloodItemId) != ''){
                    bloodExport.appendToTable(bloodItemList, bloodItemId);
                }
            });
            boxAlpha();
        },
        appendToTable: function(bloodItemList, bloodItemId){  //追加到table最后
            if(null != bloodItemList && bloodItemList.length > 0){
                $.each(bloodItemList,function(index,item){
                    var tbIdx = 0;
                    if (typeof($("#contentTable tbody tr:last").attr('xia')) == 'undefined') {
                        tbIdx = 0;
                    } else {
                        tbIdx = Number($("#contentTable tbody tr:last").attr('xia')) + 1;
                    }
                    if($.trim(bloodItemId) == item.id){
                        var trHTML = "<tr xia='" + tbIdx + "'>";
                        trHTML += "<td hidden><input type='hidden' name='bloodExportDetailList[" + tbIdx + "].id' value=''" + "/></td>";
                        trHTML += "<td hidden>" + $('#outpType').val() + "<input type='hidden' id='outpType" + tbIdx + "' name='bloodExportDetailList[" + tbIdx +
                        "].bloodOutpMaster.outpType' value='" + $('#outpType').val() + "'/></td>";
                        trHTML += "<td hidden>" + $('#sentDept').val() + "<input type='hidden' id='sentDept" + tbIdx + "' name='bloodExportDetailList[" + tbIdx +
                        "].bloodOutpMaster.sentDept' value='" + $('#sentDept').val() + "'/></td>";
                        trHTML += "<td hidden>" + $('#outpNo').val() + "<input type='hidden' id='outpNo" + tbIdx + "' name='bloodExportDetailList[" + tbIdx +
                        "].bloodOutpMaster.outpNo' value='" + $('#outpNo').val() + "'/></td>";
                        trHTML += "<td>" + item.bloodInpMaster.inpNo + "<input type='hidden' id='inpNo" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].bloodInpMaster.inpNo' value='" +
                        item.bloodInpMaster.inpNo +"'/></td>";
                        trHTML += "<td>" + item.bloodId + "<input type='hidden' id='bloodId" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].bloodId' value='" +item.bloodId + "'/></td>";
                        trHTML += "<td hidden>" + item.patBloodGroup + "<input type='hidden' id='patBloodGroup" + tbIdx + "' name='bloodExportDetailList[" + tbIdx +"].patBloodGroup' value='" + item.patBloodGroup + "'/></td>";
                        trHTML += "<td>" + item.patBloodGroupCode + "<input type='hidden' id='patBloodGroupCode" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].patBloodGroupCode' value='" +
                        item.patBloodGroupCode + "'/></td>";
                        trHTML += "<td hidden>" + item.rh + "<input type='hidden' id='rh" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].rh' value='" + item.rh + "'/></td>";
                        trHTML += "<td>" + item.rhCode + "<input type='hidden' id='rhCode" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].rhCode' value='" + item.rhCode + "'/></td>";
                        trHTML += "<td hidden>" + item.componentId + "<input type='hidden' id='componentId" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].componentId' value='" +
                        item.componentId + "'/></td>";
                        trHTML += "<td>" + item.bloodComponentName + "<input type='hidden' id='bloodComponentName" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].bloodComponentName' value='" +
                        item.bloodComponentName + "'/></td>";
                        trHTML += "<td>" + item.bloodCapacity + "<input type='hidden' id='bloodCapacity" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].bloodCapacity' value='" +
                        item.bloodCapacity + "'/></td>";
                        trHTML += "<td hidden>" + item.units + "<input type='hidden' id='units" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].units' value='" + item.units + "'/></td>";
                        trHTML += "<td>" + item.unitsName + "<input type='hidden' id='unitsName" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].unitsName' value='" + item.unitsName +
                        "'/></td>";
                        trHTML += "<td>" + item.bloodGatherDate + "<input type='hidden' id='bloodGatherDate" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].bloodGatherDate' value='" +
                        item.bloodGatherDate + "'/></td>";
                        trHTML += "<td>" + item.invalDate + "<input type='hidden' id='invalDate" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].invalDate' value='" + item.invalDate +
                        "'/></td>";
                        trHTML += "<td>" + item.bloodDonorName + "<input type='hidden' id='bloodDonorName" + tbIdx + "' name='bloodExportDetailList[" + tbIdx + "].bloodDonorName' value='" +
                        item.bloodDonorName + "'/></td>";
                        trHTML += "<td><a href='#' onclick='removeList(this)' class='applyBt btn btn-danger btn-xs'>删除</a></td>"
                        trHTML += "</tr>";
//                        $("#inputForm input").val("");
                        $("#contentTable").append(trHTML);
                        $("#addBlood").attr("disabled", "disabled");
                    }
                });
            }
        }
    }

    //删除
    function removeList(btn) {
        $(btn).parent().parent().remove();
    }
</script>